<template>
  <view class="yjbx-wrapper">
    <view class="main-pd">
      <view class="u-flex u-flex-between u-p-b-20">
        <view class="color-333 font-28">请填写报修信息：</view>
        <view class="color-f34b47 font-28" @click="$u.route('/pages/ykbx/bxjl')"
          >报修记录</view
        >
      </view>
      <view class="qus-block">
        <view class="font-28 color-595959 u-p-b-20"
          ><text class="color-f34b47">*</text> 报修事项</view
        >
        <u-textarea
          border="none"
          v-model="qusForm.title"
          :maxlength="20"
          placeholder="请输入..."></u-textarea>
      </view>
      <view class="qus-block u-m-t-20">
        <view class="font-28 color-595959 u-p-b-20">报修具体描述</view>
        <u-textarea
          border="none"
          :maxlength="100"
          height="200rpx"
          v-model="qusForm.content"
          placeholder="请输入..."></u-textarea>
      </view>
      <view class="qus-block u-m-t-20">
        <view class="u-flex u-flex-between">
          <view class="font-28 color-595959 u-p-b-20">报修图片/视频</view>
          <view class="color-bfbfbf font-24">最多可上传5张图片/5个视频</view>
        </view>
        <view>
          <cl-upload
            v-model="fileList"
            :max="5"
            useBeforeDelete
            cloudType="other"
            @beforeDelete="delItem"
            :action="config.baseUrl + '/publicapi/upload'"
            @onSuccess="onSuccess"></cl-upload>
        </view>
      </view>
      <view class="u-m-t-20 bx-msg">
        <u-cell-group :border="false">
          <u-cell title="报修人" :value="fcMsg.dzkName"></u-cell>
          <u-cell title="所在单元" :value="fcMsg.louNumber + '号楼' + fcMsg.dyNumber + '单元'+fcMsg.fjNumber + '号'"></u-cell>
          <u-cell title="所属小区" :value="fcMsg.deptName"></u-cell>
          <u-cell title="报修时间" :value="bxTime" :border="false"></u-cell>
        </u-cell-group>
      </view>
      <view class="u-m-t-106">
        <u-button
          text="提交"
          shape="circle"
          color="linear-gradient(90deg, #FA827D 0%, #F34B47 100%)"
          :customStyle="{
            fontSize: '36rpx',
            height: '96rpx',
          }"
          @click="addBxHandle"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addBxApi, getcardInfoApi } from "@/api/index";
import config from "@/config";
import useInfoStore from "@/store/user";
import { checkEmpty } from "@/utils/common";
const userStore = useInfoStore();
const { proxy } = getCurrentInstance();
const day = proxy.day;
let fileList = ref([]);
let qusForm = reactive({
  title: "",
  content: "",
  dzyzkId: userStore.dzyzkId,
  fileInfo: "",
});
// 报修时间
let bxTime = ref();
// 房产信息
let fcMsg = ref({});
// 删除图片
const delItem = (item, index, next) => {
  fileList.value.splice(index, 1);
  next();
};
// 上传处理
const onSuccess = (res) => {
  let data = res.data;
  let result = data.map((item) => {
    return {
      path: config.baseUrl + item.fileurl,
      filename: item.filename,
    };
  });
  fileList.value.push(...result);
};
// 获取房产信息
const getcardInfoHandle = () => {
  getcardInfoApi({
    openId: userStore.openId,
  }).then((res) => {
    if (res.success) {
      fcMsg.value = res.data[0];
    }
  });
};
// 添加报修
const addBxHandle = () => {
  if(fileList.value.length){
    qusForm.fileInfo = fileList.value
      .map((v) => {
        return v.path;
      })
      .join(",");
  }
  if(qusForm.title==""){
  	uni.$u.toast("请输入报修事项！")
  	return false;
  }else{
    addBxApi(qusForm).then((res) => {
      if (res.success) {
        uni.$u.toast("添加成功");
        qusForm.title = "";
        qusForm.content = "";
        qusForm.fileInfo = "";
        fileList.value = [];
		uni.requestSubscribeMessage({
		  tmplIds: ["kHG3CMCR3R_t0P2_aq01odJH7Rqv4L45QwUlnwq12Mc"],
		  success: (res) => {
		    console.log('res: ', res);
		    if (res[templateId] === 'accept') {
		      console.log("接受订阅");
		    }else{
				uni.$u.toast("未接受订阅，将无法及时接受信息！")
			}
		  }
		})
      } else {
        uni.$u.toast(res.msg);
      }
    });
  }
};
onLoad(() => {
  bxTime.value = day(Date.now()).format("YYYY-MM-DD HH:mm:ss");
  getcardInfoHandle();
});
</script>

<style lang="scss" scoped>
.yjbx-wrapper {
  padding-top: 28rpx;
  padding-bottom: 80rpx;
  .qus-block {
    background-color: #fff;
    border-radius: 12rpx;
    box-sizing: border-box;
    padding: 28rpx 32rpx;
  }
  .bx-msg {
    background-color: #fff;
  }
}
</style>
